<!--
author:前端：王晓，周妍，后端：田新宇，俞婧，杨光
create time:2020-07-16
update time:2020-07-21
 -->

{% extends 'login/../base.html' %}
{% load static %}
{% block title %}课程{% endblock %}
{% block css %}
    <link href="{% static 'css/login.css' %}" rel="stylesheet"/>
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/font-icons.css' %}"/>
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/sliders.css' %}"/>
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/style.css' %}"/>
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/responsive.css' %}"/>
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/spacings.css' %}"/>
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/animate.min.css' %}"/>
    <link rel="stylesheet" href="../../../static/bootstrap-3.3.7-dist/css/detail.css"/>
{% endblock %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>全部课程</title>
    <<<<<<< Updated upstream
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    {% comment %}  <div id="g-container">
</head>
<body>

<link rel="stylesheet" href="../../../static/bootstrap-3.3.7-dist/css/detail.css"/>
<script src="../../../static/bootstrap-3.3.7-dist/css/bootstrap.min.css"></script>
<script src="../../../static/js/course_detail_page.js"></script>

<div id="g-container">
    <!--顶部-->
>>>>>>> Stashed changes
    <div class="web-nav-container">
        <div class="m-navTop-func">
            <div class="m-navTop-func-i">
                <div class="u-navLogin-container">
                    <div class="u-navLogin-logo new-nav-spoc-logo">
                        <img width="115" height="65" src="../../../static/images/logo.png">
                    </div>
                    <div class="u-navLogin-school">
                        <a href="/index/" target="_top">
                            <span class="nav">首页</span>
                        </a>
                    </div>
                    <div class="u-navLogin-school">
                        <a href="/course/" target="_top">
                            <span class="nav">课程</span>
                        </a>
                    </div>
                    <div class="u-navLogin-school">
                        <a href="/user_center/" target="_top">
                            <span class="nav">个人中心</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>{% endcomment %}
    {% comment %}</div>{% endcomment %}
</head>
{% block content %}


    <body>
    <div id="classify">
        <div class="lessonList box">
            <div class="lf classifyList">
                <div class="allClassify">
                    <div>
                        <p class="lf" style="font-size: 14px;color:#848484;line-height: 30px;">课程分类：</p>
                        <div class="lf">
                            <ul>
                                <li class="lf"><a href="/course/">全部分类</a></li>
                                <li class="lf"><a href="/course_type/?course_type=计算机类">计算机类</a></li>
                                <li class="lf"><a href="/course_type/?course_type=外语类">外语类</a></li>
                                <li class="lf"><a href="/course_type/?course_type=体育运动类">体育运动类</a></li>
                                <li class="lf"><a href="/course_type/?course_type=文史哲类">文史哲类</a></li>
                                <li class="lf"><a href="/course_type/?course_type=心理学类">心理学类</a></li>
                                <li class="lf"><a href="/course_type/?course_type=医药卫生类">医药卫生类</a></li>
                                <li class="lf"><a href="/course_type/?course_type=工学类">工学类</a></li>
                                <li class="lf"><a href="/course_type/?course_type=教育类">教育类</a></li>
                            </ul>
                        </div>
                        <div class="cb"></div>
                    </div>

                    <div>
                        <p class="lf" style="font-size: 14px;color:#848484;line-height: 30px;">开课学校：</p>
                        <div class="lf">
                            <ul>
                                <li class="lf"><a href="/course/">全部学校</a></li>
                                <li class="lf"><a href="/course_school/?course_school=武汉大学">武汉大学</a></li>
                                <li class="lf"><a href="/course_school/?course_school=西南大学">西南大学</a></li>
                                <li class="lf"><a href="/course_school/?course_school=北京大学">北京大学</a></li>
                                <li class="lf"><a href="/course_school/?course_school=浙江大学">浙江大学</a></li>
                                <li class="lf"><a href="/course_school/?course_school=四川大学">四川大学</a></li>
                                <li class="lf"><a href="/course_school/?course_school=暨南大学">暨南大学</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="b-30"></div>
            <div class="g-doc">
                <div class="g-container m-upool" id="j-courses">
                    <div class="u-ctlist">
                        <div class="j-list f-cb" id="newCourseList">
                            <div class="um-spoc-course-list">
                                <div class="um-spoc-course-list_wrap">
                                    <!--Regular if7-->
                                    <!--Regular list-->
                                    {% for course in course_obj %}
                                        <div class="u-courseCardWithTime-container  f-fl f-transition ga-click f-scaleSubImg11"
                                             data-action="点击">
                                            <a href="/course_detail/?id={{ course.id }}" target="_blank"
                                               class="u-courseCardWithTime-container_a160">
                                                <div class="u-courseCardWithTime-img">
                                                    <img width="228" height="128" alt=""
                                                         src="{{ course.course_img }}"
                                                         class="u-courseCardWithTime-img_img161">
                                                </div>
                                                <div class="u-courseCardWithTime-teacher">
                                                    <span class="f-thide u-courseCardWithTime-teacher_span162">{{ course.course_name }}</span>
                                                </div>
                                                <div class="u-courseCardWithTime-school  f-thide">
                                                    <span class="f-thide u-courseCardWithTime-school_span163">{{ course.course_school }}</span>
                                                </div>
                                                <div class="u-courseCardWithTime-tipFunc">
                                                    <!--Regular if10-->
                                                    <div class="courseCardWithTime-tipFunc-f"></div>
                                                </div>
                                            </a>
                                        </div>
                                    {% endfor %}
                                </div>
                                <div class="b-30"></div>
                                <div class="tcdPageCodes" id="tcdPageCode">
                                    <span class="disabled">&lt;&nbsp;上一页</span>
                                    <span class="current">1</span>
                                    <a href="javascript:;" class="tcdNumber">2</a>
                                    <a href="javascript:;" class="tcdNumber">3</a>
                                    <a href="javascript:;" class="tcdNumber">4</a>
                                    <span>...</span>
                                    <a href="javascript:;" class="tcdNumber">9</a>
                                    <a href="javascript:;" class="nextPage">下一页&nbsp;&gt;</a>
                                    <div class="b-30"></div>
                                </div>

                            </div>
                        </div>

                        <script type="text/javascript">
                            $(function () {
                                if (52 > 1)
                                    $("#tcdPageCodes").createPage({
                                        pageCount: 52,
                                        current: 1,
                                        backFn: function (page) {
                                        }
                                    });
                                var course_classify = 0;
                                var stage = 'ongoing';
                                var order = 'order';
                                var per_page = 4;
                                var current_page = 1;


                                //按钮添加选中状态
                                $(".allClassify>div:eq(0) li:eq(0) a").addClass("click1");
                                $(".allClassify>div:eq(1) li:eq(1) a").addClass("click2");
                                $(".allClassify>div:eq(1) li:eq(4) a").addClass("click2");
                                //按钮点击切换
                                $(".allClassify>div:eq(0) ul li a").click(function () {
                                    if ($(this).attr('value') != 'none') {
                                        $(this).addClass("click1");
                                        $(this).parent().siblings().find("a").removeClass("click1");
                                        //console.log(obj.attr('name'));
                                        course_classify = $(this).attr('value');
                                        current_page = 1;
                                        search();
                                    }

                                });
                                $(".allClassify>div:eq(1)>div:eq(0) a").click(function () {
                                    $(this).addClass("click2");
                                    $(this).parent().siblings().find("a").removeClass("click2");
                                    //console.log(obj.attr('name'));
                                    switch ($(this).attr('name')) {
                                        case 'stage':
                                            stage = $(this).attr('value');
                                            break;
                                        case 'order':
                                            order = $(this).attr('value');
                                            break;
                                    }
                                    current_page = 1;
                                    search();
                                })
                                $(".allClassify>div:eq(1)>div:eq(1) a").click(function () {
                                    $(this).addClass("click2");
                                    $(this).parent().siblings().find("a").removeClass("click2");
                                    switch ($(this).attr('name')) {
                                        case 'stage':
                                            stage = $(this).attr('value');
                                            break;
                                        case 'order':
                                            order = $(this).attr('value');
                                            break;
                                    }
                                    current_page = 1;
                                    search();
                                })
                                //分页器
                                $(".tcdPageCode1").createPage({
                                    pageCount: 20,
                                    current: 1,
                                    backFn: function (p) {
                                        //console.log(p);
                                    }
                                });


                                var timeInerval = null;//延时用，防止连接点击
                                $("#tcdPageCode").on('click', '.nextPage', function () {
                                    if (timeInerval == null) {
                                        timeInerval = setInterval(function () {
                                            current_page++;
                                            search();
                                            clearInterval(timeInerval);
                                            timeInerval = null;
                                        }, 200);
                                    }
                                });
                                $("#tcdPageCode").on('click', '.prevPage', function () {
                                    if (timeInerval == null) {
                                        timeInerval = setInterval(function () {
                                            current_page--;
                                            search();
                                            clearInterval(timeInerval);
                                            timeInerval = null;
                                        }, 200);
                                    }
                                })
                                $("#tcdPageCode").on('click', '.tcdNumber', function () {
                                    var page = parseInt($(this).text());
                                    if (timeInerval == null) {
                                        timeInerval = setInterval(function () {
                                            current_page = page;
                                            search();
                                            clearInterval(timeInerval);
                                            timeInerval = null;
                                        }, 200);
                                    }
                                })

                                function search() {
                                    $.ajax({
                                        type: 'post',
                                        data: {
                                            'course_classify': course_classify,
                                            'stage': stage,
                                            'order': order,
                                            'per_page': per_page,
                                            'current_page': current_page
                                        },
                                        dataType: 'json',
                                        success: function (data) {
                                            $('.lessonContentList').empty();
                                            for (var i in data.data) {
                                                var obj = data.data[i];
                                                $('.lessonContentList').append(
                                                    '<div onclick="window.location.href=\'' + obj['url'] + '\';">'
                                                    + '<div class="lf" style="cursor:pointer">'
                                                    + '<img src="' + obj['cover_url'] + '" />'
                                                    + '</div>'
                                                    + '<div class="rt">'
                                                    + '<h5>' + obj['name'] + '</h5>'
                                                    + '<h6>' + obj['author'] + '</h6>'
                                                    + '<div class="desc">' + obj['description'] + '</div>'
                                                    + '<div>'
                                                    + '<span class="lf num">' + obj['user_desc'] + '</span>'
                                                    + '<span class="rt now">' + obj['stage_desc'] + '</span>'
                                                    + '<div class="cb"></div>'
                                                    + '</div>'
                                                    + '</div>'
                                                    + '<div class="cb"></div>'
                                                    + '</div>'
                                                );
                                            }
                                            if (data.code > 1) {
                                                //console.log(current_page);
                                                $("#tcdPageCode").createPage({
                                                    pageCount: data.code,
                                                    current: current_page
                                                });
                                            } else {
                                                $("#tcdPageCode").empty('');
                                            }
                                        }
                                    })
                                }
                            });
                        </script>
                        <script src="../../../static/js/course_detail_page.js"></script>
    </body>
{% endblock %}
</html>